import React from 'react'

class Comp1 extends React.Component {
  // 方法
  addCount() {
    console.log('addCound');
    // console.log(this)
    // 类组件修改 state 唯一方式
    this.setState({
      count: this.state.count + 1
    })
  }
  // 内部状态
  state = {
    message: '你好, 生命周期',
    count: 1
  }
  // 挂载
  constructor(props) {
    // 必须先调用supper
    super(props)
    // 1. 初始化数据(不建议， 太麻烦)
    // 2. 绑定this指向
    console.log('1. constructor 生命周期执行')
    console.log(document.querySelector('.oo'))
  } 
  render() {
    console.log('2. render 生命周期执行')
    console.log(document.querySelector('.oo'))
    return <div className='oo'>
      <div>类组件  Comp1----{this.state.message}</div>
      <h2>{this.state.count}</h2>
      <button onClick={() => this.addCount()}>+1</button>
    </div>
  }
  componentDidMount() {
    // 页面第一次渲染完毕执行， 真实dom已经渲染完毕, 可以操作dom
    // 发起请求
    console.log('3. componentDidMount 生命周期执行')
    console.log(document.querySelector('.oo'));
    console.log(this)
  }
  // 更新
  shouldComponentUpdate() {
    console.log('1. shouldComponentUpdate')
    // 一般用来做优化
    return false
  }

  componentDidUpdate() {
    // 数据更新完毕
    console.log('3. componentDidUpdate ')
  }

  // 销毁
  componentWillUnmount() {
    // 1. 取消副作用
  }
}


export default Comp1